<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>方块自动移动</title>
    <style>
        body {
            margin: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            border: 1px solid rgb(83, 83, 83);
            text-align: center;
            line-height: 100px;
            font-size: 18px;
            border-radius: 50px;

            position: absolute;
            top: 300px;
            left: 100px;
        }

        h3 {
            margin-top: 200px;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <h3 id="content"></h3>
    <div id="box">
        单击移动
    </div>
    <script>
        var box = document.getElementById('box');
        box.addEventListener('click', isMove);
        //定义一个标识-标识时停止还是移动
        var flag = false;//表示停止
        var t;//定时器的表示
        //判断当前方块的状态
        function isMove() {
            if (!flag) {//如果停止就移动
                //将标识设置为true-表示移动
                flag = true;
                box.innerHTML = "单击停止"
                move();
            } else {//如果移动就停止
                flag = false;
                box.innerHTML = "单击移动"
                stop();
            }
        }
        //实现方块移动逻辑
        function move() {
            //1获取当前方块的left样式属性值
            var style = window.getComputedStyle(box);
            var left = parseInt(style.left);
            //2增加left样式属性值
            left++;
            //3利用内联样式覆盖外联样式
            box.style.left = left + 'px';
            //设置定时器
            t = setTimeout(move, 20);

        }
        //实现方块停止逻辑
        function stop() {
            clearTimeout(t)
            var content = document.getElementById("content")
            content.innerHTML = "距离左边界距离：" + box.offsetLeft + "  距离上边距距离：" + box.offsetTop + " <br/>元素可见宽度：" + box.offsetWidth + " 元素可见高度：" + box.offsetHeight+" <br/>元素的偏移容器："+box.offsetParent
            console.log("元素的偏移容器",box.offsetParent)
        }
    </script>
</body>

</html>